<template>
	<div class="container">
		<div class="content">
			<!-- <div class="tabBox">
				<div class="leftInner">
					<ul class="tabList">
						<li v-for="(item, index) in tabList" :key="index" :class="activeIndex == index ? 'active' : ''" @click="goTab(item.value, index)">{{ item.name }}</li>
					</ul>
				</div>
				<div class="rightInner">
					<div class="innerArea" v-show="tabActive != 2" @click="goOther(1)">
						<img src="../../assets/images/icon15.png" alt="" />
						<p>{{ $t('持仓') }}</p>
					</div>
					<div class="starBox">
						<img v-show="isCollect" @click="getCollect" src="../../assets/images/star_active.png" alt="" />
						<img v-show="!isCollect" @click="getCollect" src="../../assets/images/star_inactive.png" alt="" />
					</div>
				</div>
			</div> -->
			<div class="tabInner" v-show="tabActive == 0">
				<div class="contentInnerArea" style="overflow-y: hidden;">
					<!-- <div class="topInner">
						<div class="leftBox">
							<div class="ttlBox" @click="sideBarShow = true">
								<p>{{ title }}</p>
								<img src="../../assets/images/arrow_down.png" alt="" />
							</div>
						</div>
					</div> -->
					<div class="navList">
						<div class="navListIt" v-for="(item, index) in symbolsArray" :key="index"
							@click.stop="clickTab(item,index)" :class="{navListItTow:bi_id==item.bi_id}">
							{{ item.cn_title }}
						</div>
					</div>
					<div class="btmInner" v-if="codeKey">
						<iframe :src="'/html/index.html?symbol='+ codeKey +'&lang='+ $i18n.locale"
							frameborder="0"></iframe>
						<!-- <div class="realTimeBox">
            <ul>
              <li>
                <van-button @click="goOther(2, 1)" block>{{
                  $t("实时数据")
                }}</van-button>
              </li>
              <li>
                <van-button @click="goOther(2, 2)" block>{{
                  $t("实时成交")
                }}</van-button>
              </li>
            </ul>
          </div> -->
					</div>
				</div>
				<div class="btmInnerBox">
					<ul>
						<li>
							<van-button block type="primary" @click="buyMore">{{ $t('做多') }}</van-button>
						</li>
						<li>
							<van-button block type="danger" @click="buyShort">{{ $t('做空') }}</van-button>
						</li>
					</ul>
				</div>
			</div>
			<div class="tabInner" v-show="tabActive == 1">
				<div class="contentInnerArea">
					<!-- <div class="topArea">
						<div class="leftBox">
							<div class="ttlBox" @click="sideBarShow = true">
								<p>{{ title }}</p>
								<img src="../../assets/images/arrow_down.png" alt="" />
							</div>
							<p class="noteTxt">
								<span :class="[change > 0 ? 'green' : 'red', 'txt']">{{ cny }}</span>
								<span :class="[change > 0 ? 'green' : 'red']">{{ change > 0 ? '+' : '' }}{{ change }}%</span>
							</p>
						</div>
						<div class="rightBox">
							<p :class="[change > 0 ? 'green' : 'red']">{{ close }}</p>
						</div>
					</div> -->
					<div class="navList">
						<div class="navListIt" v-for="(item, index) in symbolsArray" :key="index"
							@click.stop="clickTab(item,index)" :class="{navListItTow:bi_id==item.bi_id}">
							{{ item.title }}
						</div>
					</div>
					<div class="contentInner">
						<div class="leftSub">
							<div class="ttl">
								<p class="num">{{ $t('数量') }}</p>
								<p class="price">{{ $t('价格') }}</p>
							</div>
							<ul>
								<li v-for="(item, index) in data01" :key="index">
									<template v-if="item">
										<p v-if="item.amount" class="num">{{ item.amount.toFixed(6) }}</p>
										<p v-if="item.price" class="price">{{ item.price }}</p>
									</template>
								</li>
							</ul>
						</div>
						<div class="rightSub">
							<div class="ttl">
								<p class="num">{{ $t('价格') }}</p>
								<p class="price">{{ $t('数量') }}</p>
							</div>
							<ul>
								<li v-for="(item, index) in data02" :key="index">
									<template v-if="item">
										<p v-if="item.price" class="price">{{ item.price }}</p>
										<p v-if="item.amount" class="num">{{ item.amount.toFixed(6) }}</p>
									</template>
								</li>
							</ul>
						</div>
					</div>
					<div class="contentArea">
						<div class="tabArea">
							<ul>
								<li :class="storeIndex == index ? 'active' : ''" v-for="(item, index) in storeList"
									:key="index" @click="getStoreFunc(index)">{{ item }}</li>
							</ul>
						</div>
						<div class="tabInnerContent" v-show="storeIndex == 0">
							<div class="ttlBox02">
								<p>{{ $t('产品') }}</p>
								<p>{{ $t('成交价') }}</p>
								<p>{{ $t('方向') }}</p>
								<p>{{ $t('交易手数') }}</p>
							</div>
							<van-pull-refresh v-model="refreshing" @refresh="onRefresh01">
								<van-list v-model="loading" :finished="finished" :finished-text="$t('没有更多数据了')"
									@load="getOrderInfo" :error-text="$t('没有更多数据了')">
									<van-cell v-for="(item, index) in orderList" :key="index" class="itemBox02">
										<p>{{ item.bi_name }}/USD</p>
										<p>{{ item.auto_start_money ? item.auto_start_money : 0 }}</p>
										<p>{{ item.type == 1 ? '做多' : '做空' }}</p>
										<p>{{ item.multiple }}</p>
									</van-cell>
								</van-list>
							</van-pull-refresh>
						</div>
						<div class="tabInnerContent" v-show="storeIndex == 1">
							<div class="ttlBox01">
								<p>{{ $t('产品') }}</p>
								<p>{{ $t('波动盈亏') }}</p>
								<p>{{ $t('成交价') }}</p>
								<p>{{ $t('方向') }}</p>
								<p>{{ $t('交易手数') }}</p>
							</div>
							<van-pull-refresh v-model="refreshing" @refresh="onRefresh01">
								<van-list v-model="loading" :finished="finished" :finished-text="$t('没有更多数据了')"
									@load="getOrderInfo" :error-text="$t('没有更多数据了')">
									<van-cell v-for="(item, index) in orderList" :key="index" class="itemBox01">
										<p>{{ item.bi_name }}/USD</p>
										<p>{{ item.win_money ? item.win_money : 0 }}</p>
										<p>{{ item.auto_start_money ? item.auto_start_money : 0 }}</p>
										<p>{{ item.type == 1 ? '做多' : '做空' }}</p>
										<p>{{ item.multiple }}</p>
									</van-cell>
								</van-list>
							</van-pull-refresh>
						</div>
						<div class="tabInnerContent" v-show="storeIndex == 2">
							<div class="ttlBox02">
								<p>{{ $t('产品') }}</p>
								<p>{{ $t('成交价') }}</p>
								<p>{{ $t('方向') }}</p>
								<p>{{ $t('交易手数') }}</p>
							</div>
							<van-pull-refresh v-model="refreshing" @refresh="onRefresh01">
								<van-list v-model="loading" :finished="finished" :finished-text="$t('没有更多数据了')"
									@load="getOrderInfo" :error-text="$t('没有更多数据了')">
									<van-cell v-for="(item, index) in orderList" :key="index" class="itemBox02">
										<p>{{ item.bi_name }}/USD</p>
										<p>{{ item.auto_start_money ? item.auto_start_money : 0 }}</p>
										<p>{{ item.type == 1 ? '做多' : '做空' }}</p>
										<p>{{ item.multiple }}</p>
									</van-cell>
								</van-list>
							</van-pull-refresh>
						</div>
						<div class="tabInnerContent" v-show="storeIndex == 3">
							<div class="ttlBox02">
								<p>{{ $t('产品') }}</p>
								<p>{{ $t('成交价') }}</p>
								<p>{{ $t('方向') }}</p>
								<p>{{ $t('交易手数') }}</p>
							</div>
							<van-pull-refresh v-model="refreshing" @refresh="onRefresh01">
								<van-list v-model="loading" :finished="finished" :finished-text="$t('没有更多数据了')"
									@load="getOrderInfo" :error-text="$t('没有更多数据了')">
									<van-cell v-for="(item, index) in orderList" :key="index" class="itemBox02">
										<p>{{ item.bi_name }}/USD</p>
										<p>{{ item.auto_start_money ? item.auto_start_money : 0 }}</p>
										<p>{{ item.type == 1 ? '做多' : '做空' }}</p>
										<p>{{ item.multiple }}</p>
									</van-cell>
								</van-list>
							</van-pull-refresh>
						</div>
						<div class="tabInnerContent" v-show="storeIndex == 4">
							<div class="ttlBox02">
								<p>{{ $t('产品') }}</p>
								<p>{{ $t('成交价') }}</p>
								<p>{{ $t('方向') }}</p>
								<p>{{ $t('交易手数') }}</p>
							</div>
							<van-pull-refresh v-model="refreshing" @refresh="onRefresh01">
								<van-list v-model="loading" :finished="finished" :finished-text="$t('没有更多数据了')"
									@load="getOrderInfo" :error-text="$t('没有更多数据了')">
									<van-cell v-for="(item, index) in orderList" :key="index" class="itemBox02">
										<p>{{ item.bi_name }}/USD</p>
										<p>{{ item.auto_start_money ? item.auto_start_money : 0 }}</p>
										<p>{{ item.type == 1 ? '做多' : '做空' }}</p>
										<p>{{ item.multiple }}</p>
									</van-cell>
								</van-list>
							</van-pull-refresh>
						</div>
					</div>
				</div>
				<div class="btmInnerBox">
					<ul>
						<li>
							<van-button block type="primary" @click="buyMore">{{ $t('做多') }}</van-button>
						</li>
						<li>
							<van-button block type="danger" @click="buyShort">{{ $t('做空') }}</van-button>
						</li>
					</ul>
				</div>
			</div>
			<div class="tabInner" v-show="tabActive == 2">
				<div class="contentInnerArea">
					<!-- <div class="topArea">
						<div class="leftBox">
							<div class="ttlBox" @click="sideBarShow = true">
								<p>{{ title }}</p>
								<img src="../../assets/images/arrow_down.png" alt="" />
							</div>
							<p class="noteTxt">
								<span :class="[change > 0 ? 'green' : 'red', 'txt']">{{ cny }}</span>
								<span :class="[change > 0 ? 'green' : 'red']">{{ change > 0 ? '+' : '' }}{{ change }}%</span>
							</p>
						</div>
						<div class="rightBox">
							<p :class="[change > 0 ? 'green' : 'red']">{{ close }}</p>
						</div>
					</div> -->
					<div class="navList">
						<div class="navListIt" v-for="(item, index) in symbolsArray" :key="index"
							@click.stop="clickTab(item,index)" :class="{navListItTow:bi_id==item.bi_id}">
							{{ item.title }}
						</div>
					</div>
					<div class="contentInner">
						<div class="leftSub">
							<div class="ttl">
								<p class="num">{{ $t('数量') }}</p>
								<p class="price">{{ $t('价格') }}</p>
							</div>
							<ul>
								<li v-for="(item, index) in data01" :key="index">
									<template v-if="item">
										<p v-if="item.amount" class="num">{{ item.amount.toFixed(6) }}</p>
										<p v-if="item.price" class="price">{{ item.price }}</p>
									</template>
								</li>
							</ul>
						</div>
						<div class="rightSub">
							<div class="ttl">
								<p class="num">{{ $t('价格') }}</p>
								<p class="price">{{ $t('数量') }}</p>
							</div>
							<ul>
								<li v-for="(item, index) in data02" :key="index">
									<template v-if="item">
										<p v-if="item.price" class="price">{{ item.price }}</p>
										<p v-if="item.amount" class="num">{{ item.amount.toFixed(6) }}</p>
									</template>
								</li>
							</ul>
						</div>
					</div>
					<div class="contentArea">
						<div class="tabAreaInner">
							<div class="leftAreaInner">{{ $t('当前委托') }}({{ bibiOrderList.length }})</div>
							<div class="rightAreaInner" @click="goOther(3)"><img src="../../assets/images/order.png"
									alt="" /></div>
						</div>
						<div class="tabContent">
							<div class="noneBox" v-if="bibiOrderList.length == 0"><img
									src="../../assets/images/no_order.png" alt="" /></div>
							<div class="hasBox" v-else>
								<div class="itemBox" v-for="(item, index) in bibiOrderList" :key="index">
									<div class="topInner">
										<p class="ttl">{{ item.bi_name }}/USD</p>
										<p class="note" @click="cancelOrder(item.id)">{{ $t('撤销') }}</p>
									</div>
									<div class="btmInner">
										<div class="item">
											<p class="ttl" v-show="item.type == 1">{{ $t('买入时间') }}</p>
											<p class="ttl" v-show="item.type == 2">{{ $t('卖出时间') }}</p>
											<p class="text">{{ formatTime(item.addtime, 'yyyy-MM-dd HH:mm:ss') }}</p>
										</div>
										<div class="item">
											<p class="ttl">{{ $t('委托价格') }}</p>
											<p class="text">{{ item.start_money }}</p>
										</div>
										<div class="item">
											<p class="ttl">{{ $t('金额') }}({{ $t('USDT') }})</p>
											<p class="text">{{ item.money }}</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="btmInnerBox">
					<ul>
						<li>
							<van-button block type="primary" @click="buyMore">{{ $t('买入') }}</van-button>
						</li>
						<li>
							<van-button block type="danger" @click="buyShort">{{ $t('卖出') }}</van-button>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<van-popup v-model="sideBarShow" position="left">
			<div class="sideBarBox">
				<p class="title">{{ $t('期货行情') }}</p>
				<van-tabs v-model="active" @click="getCoinClickFunc">
					<van-tab :title="$t('自选')"></van-tab>
					<van-tab :title="$t('产品')"></van-tab>
				</van-tabs>
				<div class="contentInnerArea" v-show="tabActiveIndex == 0">
					<van-search background="#fff" v-model="searchText" :placeholder="$t('搜索产品')" @input="onSearch" />
					<div class="innerBox">
						<div class="item" v-for="(item, index) in symbolsArray" :key="index"
							@click.stop="clickTab(item,index)">
							<p class="ttl">
								<span>
									{{ item.title }}
									<p style="font-size: 10px;color: #888;">{{ item.symbol }}</p>
								</span>
							</p>
							<p v-if="futures && futures[item.symbol]"
								:class="['text', futures[item.symbol].ratio > 0 ? '' : 'red']">
								{{ futures[item.symbol].close }}
							</p>
						</div>
					</div>
				</div>
				<div class="contentInnerArea" v-show="tabActiveIndex == 1">
					<van-search background="#fff" v-model="searchText" :placeholder="$t('搜索产品')" @input="onSearch" />
					<div class="innerBox">
						<div class="item" v-for="(item, index) in symbolsArray" :key="index"
							@click.stop="clickTab(item,index)">
							<p class="ttl">
								<span>
									{{ item.title }}
									<p style="font-size: 10px;color: #888;">{{ item.symbol }}</p>
								</span>
							</p>
							<p v-if="futures && futures[item.symbol]"
								:class="['text', futures[item.symbol].ratio > 0 ? '' : 'red']">
								{{ futures[item.symbol].close }}
							</p>
						</div>
					</div>
				</div>
			</div>
		</van-popup>
		<van-popup v-model="addShow01" position="center">
			<div class="bottomBarBox">
				<div class="ttlBox">
					<p class="ttl">{{ $t('订单确认') }}</p>
					<img @click="addShow01 = false" src="../../assets/images/chahao.png" alt="" />
				</div>
				<div class="subBox">
					<p class="titleTxt">{{ $t('结算时间/赔率') }}</p>
					<div class="innerArea">
						<div :class="[timeIndex == index ? 'active' : '', 'itemArea']" v-for="(item, index) in timeList"
							:key="index" @click="getTimeInfo(index)">
							<p class="note">{{ item.m }}s</p>
							<p style="margin: 0 5px;">|</p>
							<p class="num">{{ Number(item.desc).toFixed(1) }}%</p>
						</div>
					</div>
					<p class="titleTxt">{{ $t('投资资金') }}</p>
					<div class="innerArea">
						<div :class="[priceIndex == 0 ? 'active' : '', 'itemArea']" @click="getpriceInfo(0,100)">
							<p class="note">￥100</p>
						</div>
						<div :class="[priceIndex == 1 ? 'active' : '', 'itemArea']" @click="getpriceInfo(1,1000000)">
							<p class="note">￥1000000</p>
						</div>
					</div>
					<input class="priceInput" type="text" v-model="price" :placeholder="placeholderTow" />
					<p class="btmTxt">
						<span>{{ $t('可用余额') }}:{{ money }}</span>
						<span>{{ $t('手续费') }}:{{ transactionFee }}%</span>
					</p>
				</div>
				<div class="btn btnddd">
					<van-button type="primary" block size="small"
						@click="addFastExtremelyFunc">{{ $t('确认下单') }}</van-button>
				</div>
				<div class="subBox subBoxTow">
					<div class="innerItemTow" style="width: 25%;">
						<p class="title">{{ $t('名称') }}</p>
						<p class="text">{{ title }}</p>
					</div>
					<div class="innerItemTow">
						<p class="title">{{ $t('方向') }}</p>
						<p class="green">{{ $t('做多') }}</p>
					</div>
					<div class="innerItemTow">
						<p class="title">{{ $t('现价') }}</p>
						<!-- <p class="green" v-if="ch[`market.${symbol}.detail`] && ch[`market.${symbol}.detail`].tick">
							{{ ch[`market.${symbol}.detail`].tick.close }}
						</p> -->
						<p class="green" v-if="future">
							{{future.close }}
							<!-- {{ futures[symbol].close }} -->
						</p>
					</div>
					<div class="innerItemTow" style="flex: 1;">
						<p class="title">{{ $t('金额') }}</p>
						<p class="text" v-if="price != ''">￥{{ price }}</p>
						<p class="text" v-else>￥{{ prices }}</p>
					</div>
				</div>
			</div>
		</van-popup>
		<van-popup v-model="lessShow01" position="center">
			<div class="bottomBarBox">
				<div class="ttlBox">
					<p class="ttl">{{ $t('订单确认') }}</p>
					<img @click="lessShow01 = false" src="../../assets/images/chahao.png" alt="" />
				</div>
				<div class="subBox">
					<p class="titleTxt">{{ $t('结算时间/赔率') }}</p>
					<div class="innerArea">
						<div :class="[timeIndex == index ? 'active' : '', 'itemArea']" v-for="(item, index) in timeList"
							:key="index" @click="getTimeInfo(index)">
							<p class="note">{{ item.m }}s</p>
							<p style="margin: 0 5px;">|</p>
							<p class="num">{{ Number(item.desc).toFixed(1) }}%</p>
						</div>
					</div>
					<p class="titleTxt">{{ $t('买入数量') }}</p>
					<div class="innerArea">
						<div :class="[priceIndex == 0 ? 'active' : '', 'itemArea']" @click="getpriceInfo(0,100)">
							<p class="note">￥100</p>
						</div>
						<div :class="[priceIndex == 1 ? 'active' : '', 'itemArea']" @click="getpriceInfo(1,1000000)">
							<p class="note">￥1000000</p>
						</div>
					</div>
					<input class="priceInput" type="text" v-model="price" :placeholder="placeholderTow" />
					<p class="btmTxt">
						<span>{{ $t('可用余额') }}:{{ money }}</span>
						<span>{{ $t('手续费') }}:{{ transactionFee }}%</span>
					</p>
				</div>
				<div class="btn btnddd">
					<van-button type="primary" block size="small"
						@click="lessFastExtremelyFunc">{{ $t('确认下单') }}</van-button>
				</div>
				<div class="subBox subBoxTow">
					<div class="innerItemTow" style="width: 25%;">
						<p class="title">{{ $t('名称') }}</p>
						<p class="text">{{ title }}</p>
					</div>
					<div class="innerItemTow">
						<p class="title">{{ $t('方向') }}</p>
						<p class="red">{{ $t('做多') }}</p>
					</div>
					<div class="innerItemTow">
						<p class="title">{{ $t('现价') }}</p>
						<!-- <p class="red" v-if="ch[`market.${symbol}.detail`] && ch[`market.${symbol}.detail`].tick">
							{{ ch[`market.${symbol}.detail`].tick.close }}</p> -->
							<p class="red" v-if="future">{{future.close }}</p>
					</div>
					<div class="innerItemTow" style="flex: 1;">
						<p class="title">{{ $t('金额') }}</p>
						<p class="text" v-if="price != ''">￥{{ price }}</p>
						<p class="text" v-else>￥{{ prices }}</p>
					</div>
				</div>
			</div>
		</van-popup>
		<van-popup v-model="popupShow02" position="bottom">
			<div class="popupBottomBox">
				<div class="ttlBox">
					<p class="ttl">{{ $t('订单确认') }}</p>
					<img @click="popupShow02 = false" src="../../assets/images/chahao.png" alt="" />
				</div>
				<div class="subBox">
					<van-tabs v-model="activeMoney" color="#f3a630" line-height="1px" @click="getMoneyChangeInfo">
						<van-tab :title="$t('市价委托')" title-class="tabStyle"></van-tab>
						<van-tab :title="$t('限价委托')" title-class="tabStyle"></van-tab>
					</van-tabs>
					<ul class="tabList">
						<li @click="getIndex(0)" :class="[buyIndex == 0 ? 'active' : '']">{{ $t('做多') }}</li>
						<li @click="getIndex(1)" :class="[buyIndex == 1 ? 'active' : '']">{{ $t('做空') }}</li>
					</ul>
					<div class="subArea" v-show="activeMoney == 1">
						<p class="titleTxt">{{ $t('委托价格') }}</p>
						<input type="text" v-model="orderPrice" :placeholder="$t('请输入委托价格')" />
					</div>
					<p class="titleTxt">{{ $t('交易手数') }}</p>
					<ul class="tabUl">
						<li v-for="(item, index) in tabArr" :key="index" @click="getValue(index)"
							:class="tabIndex == index ? 'active' : ''">{{ item }}</li>
					</ul>
					<div class="inputBox">
						<van-button type="default" @click="getLess03"><van-icon name="minus" /></van-button>
						<input class="inputStyle" type="number" v-model="contractAmount" @blur="getAmount" />
						<van-button type="default" @click="getAdd03"><van-icon name="plus" /></van-button>
					</div>
					<div class="innerArea">
						<!-- <div class="item">
              <p>{{ $t("占用保证金") }}</p>
              <p>476.1924</p>
            </div> -->
						<div class="item">
							<p>{{ $t('手续费') }}</p>
							<p>{{ transactionFee }}</p>
						</div>
						<div class="item">
							<p>{{ $t('可用余额') }}</p>
							<p v-show="buyIndex == 0">{{ money }}</p>
							<p v-show="buyIndex == 1">{{ money }}</p>
						</div>
					</div>
					<p class="titleTxt">{{ $t('杠杆倍数') }}</p>
					<ul class="tabUlBox">
						<li v-for="(item, index) in tabArray" :key="index" @click="getValueIndex(index)"
							:class="tabArrIndex == index ? 'active' : ''">{{ item }}</li>
					</ul>
					<div v-show="buyIndex == 0">
						<p class="titleTxt">{{ $t('止损价') }}</p>
						<div class="inputBox">
							<van-button type="default" @click="getLess04"><van-icon name="minus" /></van-button>
							<input class="inputStyle" type="number" v-model="stopPrice" @blur="getStopPirce" />
							<van-button type="default" @click="getAdd04"><van-icon name="plus" /></van-button>
						</div>
						<p class="titleTxt">{{ $t('止盈价') }}</p>
						<div class="inputBox">
							<van-button type="default" @click="getLess05"><van-icon name="minus" /></van-button>
							<input class="inputStyle" type="number" v-model="takeProfitPrice"
								@blur="getTakeProfitPrice" />
							<van-button type="default" @click="getAdd05"><van-icon name="plus" /></van-button>
						</div>
					</div>
					<div v-show="buyIndex == 1">
						<p class="titleTxt">{{ $t('止损价') }}</p>
						<div class="inputBox">
							<van-button type="default" @click="getLess05"><van-icon name="minus" /></van-button>
							<input class="inputStyle" type="number" v-model="takeProfitPrice"
								@blur="getTakeProfitPrice" />
							<van-button type="default" @click="getAdd05"><van-icon name="plus" /></van-button>
						</div>
						<p class="titleTxt">{{ $t('止盈价') }}</p>
						<div class="inputBox">
							<van-button type="default" @click="getLess04"><van-icon name="minus" /></van-button>
							<input class="inputStyle" type="number" v-model="stopPrice" @blur="getStopPirce" />
							<van-button type="default" @click="getAdd04"><van-icon name="plus" /></van-button>
						</div>
					</div>
				</div>
				<div class="btn">
					<van-button type="primary" v-show="buyIndex == 0" block size="small"
						@click="addContractFunc">{{ $t('做多') }}</van-button>
					<van-button type="danger" v-show="buyIndex == 1" block size="small"
						@click="lessContractFunc">{{ $t('做空') }}</van-button>
				</div>
			</div>
		</van-popup>
		<van-popup v-model="addShow03" position="bottom">
			<div class="popupBottomBox">
				<div class="ttlBox">
					<p class="ttl">{{ $t('订单确认') }}</p>
					<img @click="addShow03 = false" src="../../assets/images/chahao.png" alt="" />
				</div>
				<div class="subInner">
					<van-dropdown-menu active-color="#f3a630"><van-dropdown-item v-model="buyValue"
							:options="buyList" /></van-dropdown-menu>
					<div class="itemInner" v-show="buyValue == 0">
						<p>{{ $t('以当前最优价格交易') }}</p>
					</div>
					<div class="inputBox" v-show="buyValue == 1">
						<van-button type="default" @click="getLess"><van-icon name="minus" /></van-button>
						<input class="inputStyle" type="number" v-model="popupShowFormNumber" />
						<van-button type="default" @click="getAdd"><van-icon name="plus" /></van-button>
					</div>
					<div class="itemInner"><input type="number" v-model="amountBibi" :placeholder="$t('交易额')" /></div>
					<div class="itemText">
						<p>{{ $t('可用') }}</p>
						<p>{{ money }}</p>
					</div>
					<ul class="tabUl">
						<li v-for="(item, index) in numArr" :key="index" @click="getIndexValue01(index)"
							:class="numIndex == index ? 'active' : ''">{{ item }}%</li>
					</ul>
				</div>
				<div class="btn">
					<van-button type="primary" block size="small" @click="addCurrencyFunc">{{ $t('买入') }}</van-button>
				</div>
			</div>
		</van-popup>
		<van-popup v-model="lessShow03" position="bottom">
			<div class="popupBottomBox">
				<div class="ttlBox">
					<p class="ttl">{{ $t('订单确认') }}</p>
					<img @click="lessShow03 = false" src="../../assets/images/chahao.png" alt="" />
				</div>
				<div class="subInner">
					<van-dropdown-menu active-color="#f3a630"><van-dropdown-item v-model="buyValue"
							:options="buyList" /></van-dropdown-menu>
					<div class="itemInner" v-show="buyValue == 0">
						<p>{{ $t('以当前最优价格交易') }}</p>
					</div>
					<div class="inputBox" v-show="buyValue == 1">
						<van-button type="default" @click="getLess02"><van-icon name="minus" /></van-button>
						<input class="inputStyle" type="number" v-model="popupShowLessNumber" />
						<van-button type="default" @click="getAdd02"><van-icon name="plus" /></van-button>
					</div>
					<div class="itemInner">
						<input type="number" v-model="amount" :placeholder="$t('数量')" />
						<span>{{ symbolObj.note }}</span>
					</div>
					<div class="itemText">
						<p>{{ $t('可用') }}</p>
						<p>
							<span>{{ bibiInfo.bibi_money ? bibiInfo.bibi_money : 0 }}</span>
							<span>{{ symbolObj.note }}</span>
						</p>
					</div>
					<ul class="tabUl">
						<li v-for="(item, index) in numArr" :key="index" @click="getIndexValue02(index)"
							:class="numIndex == index ? 'active' : ''">{{ item }}%</li>
					</ul>
				</div>
				<div class="btn">
					<van-button type="danger" block size="small" @click="lessCurrencyFunc">{{ $t('卖出') }}</van-button>
				</div>
			</div>
		</van-popup>
		<van-popup v-model="showFastOrder" position="center" :close-on-click-overlay="false">
			<div class="popupCenterBox">
				<div class="ttlBox">
					<p>{{ symbolObj.note }}</p>
					<img @click="cancelBtn" src="../../assets/images/chahao.png" alt="" />
				</div>
				<div class="contentSub">
					<svgProgressBar class="vancircle" :value="currentRate" v-if="!showResult" :options="optionsBar">
					</svgProgressBar>
					<div class="titleBox" v-show="showResult">
						<p class="title">{{ usdtInfo }} USD</p>
						<p class="text">{{ $t('到期结算完成') }}</p>
					</div>
					<div class="innerArea">
						<div class="item" v-if="showResult2 == 0">
							<p class="ttl">{{ $t('当前价') }}</p>
							<p class="text" v-if="ch[`market.${symbol}.detail`] && ch[`market.${symbol}.detail`].tick">
								{{ ch[`market.${symbol}.detail`].tick.close }}</p>
						</div>
						<div class="item" v-if="showResult2 == 1">
							<p class="ttl">{{ $t('当前价') }}</p>
							<p class="text">{{ kaijiangres }}</p>
						</div>
						<div class="item">
							<p class="ttl">{{ $t('方向') }}</p>
							<p class="text" v-if="buyType == 0" style="color:#5eb98">{{ $t('买涨') }}</p>
							<p class="text" v-if="buyType == 1" style="color: #db6964;">{{ $t('买跌') }}</p>
						</div>
						<div class="item">
							<p class="ttl">{{ $t('数量') }}</p>
							<p class="text">{{ priceBuy }} USD</p>
						</div>
						<div class="item">
							<p class="ttl">{{ $t('价格') }}</p>
							<p class="text">{{ strikePrice }}</p>
						</div>
						<!-- <div class="item">
              <p class="ttl">{{ $t("预计收益") }}</p>
              <p class="text" v-if="priceBuy" style="color: #006600;">
                +{{ (priceBuy * Number(timeList[timeIndex].desc)) / 100 || 0 }}
              </p>
            </div> -->
					</div>
					<div class="btn">
						<van-button @click="cancelBtn" block type="info">{{ $t('继续购买') }}</van-button>
					</div>
				</div>
			</div>
		</van-popup>
		<!-- <loading v-if="showLoading" :show="showLoading"></loading> -->
		<tabBar :active="1"></tabBar>
	</div>
</template>

<script>
	import tabBar from '@/components/tabBar.vue';
	import {
		formatTime
	} from '@/utils/tools';
	import svgProgressBar from 'svg-progress-bar';
	export default {
		name: 'trade',
		components: {
			tabBar,
			svgProgressBar
		},
		data() {
			let minPrice = 0;
			return {
				tabList: [{
						name: this.$t('极速'),
						value: 0
					}
					// {
					//   name: this.$t("合约"),
					//   value: 1
					// },
					//     {
					//       name: this.$t("币币"),
					//       value: 2
					//     },
				],
				active: 1,
				activeIndex: 0,
				isCollect: false,
				sideBarShow: false,
				timeTabList: ['Time', '1M', '5M', '15M', '30M', '1H', '1D', '7D'],
				timeIndex: 0,
				storeList: [this.$t('持仓'), this.$t('已成交'), this.$t('已平仓'), this.$t('已撤单'), this.$t('已锁仓')],
				storeIndex: 0,
				options: {},
				chart: null,
				searchText: '',
				addShow01: false,
				popupShow02: false,
				addShow03: false,
				lessShow01: false,
				lessShow03: false,
				placeholder: this.$t('最少') + minPrice + this.$t('起买'),
				placeholderTow: this.$t('其他金额'),
				price: '',
				prices: '',
				timeList: [],
				timeIndex: 0,
				buyIndex: 0,
				tabArr: [1, 5, 10, 20],
				tabIndex: 0,
				popupShowFormNumber: 1,
				popupShowLessNumber: 1,
				popupShowForm: {
					number: 1
				},
				tabArray: [5, 10, 15, 20, 100],
				tabArrIndex: 0,
				buyList: [{
					text: this.$t('市价委托'),
					value: 0
				}, {
					text: this.$t('限价委托'),
					value: 1
				}],
				buyValue: 0,
				amount: '', // 交易额
				amountBibi: '', // 交易额
				numArr: [25, 50, 75, 100],
				numIndex: 0,
				symbolsArray: [
					// { symbol: "btcusdt", title: "BTC/USDT" },
					// { symbol: "ethusdt", title: "ETH/USDT" },
					// { symbol: "eosusdt", title: "EOS/USDT" },
					// { symbol: "crousdt", title: "CRO/USDT" },
					// { symbol: "trxusdt", title: "TRX/USDT" },
				],
				ch: {}, // 实时数据
				title: '',
				bi_id: '',
				symbol: '',
				symbolObj: {},
				money: 0,
				transactionFee: 0,
				change: 0,
				cny: 0,
				close: 0,
				moneyList: [],
				moneyBibi: 0,
				data01: [],
				data02: [],
				datas: [], //  实时数据
				activeMoney: 0,
				contractAmount: 1,
				contractAmountOld: 1,
				takeProfitPrice: 1,
				stopPrice: 1,
				orderPrice: '',
				page: 0,
				rows: 10,
				refreshing: false,
				finished: false,
				loading: false,
				orderList: [],
				totalElements: 0,
				showLoading: true,
				bibiOrderList: [],
				bibiInfo: {},
				showFastOrder: false,
				currentRate: 0,
				optionsBar: {
					radius: 50,
					circleWidth: 50,
					maxValue: 60,
					pathColors: ['#E7F3FF', '#428EF5'],
					duration: 0
				},
				buyType: 0,
				strikePrice: 0,
				priceBuy: 0,
				showResult: false,
				usdtInfo: 0,
				timesId: null,
				tabActive: 0,
				showResult2: 0,
				kaijiangres: 0,
				tabActiveIndex: 1,
				chValue: '',
				sendInterval: '',
				codeKey: '',
				futures: null,
				future: null,
				currentSymbol: null,
				isShowSysbol: 0,
				priceIndex: 0,
				t:null
			};
		},
		destroyed() {  
			clearInterval(this.t);
			this.t=null
			console.log('组件已被销毁');  
		}, 
		created() {
			this.getOrderStoreTimeInfo();
		},
		mounted() {
			if(this.priceIndex==0){
				// this.price=100;
				this.prices = 100;
			}
			this.$nextTick(async () => {
				let symbol = this.$route.query.symbol || localStorage.getItem('symbol') || 'GC'
				this.codeKey = symbol
				this.symbol = symbol
				this.bi_id = this.$route.query.id || 0
				this.symbolsArray = await this.initMarketInfo()
				this.loadTopMarket()
				//关闭订阅列表
				this.send()
				let Interval = setInterval(() => {
					if (this.future) {
						clearInterval(Interval)
						if (this.$i18n.locale == 'zh') {
							this.title = this.future.name
						} else {
							this.title = this.future.ename || this.future.name
						}
					}
				}, 500)

				this.loadSymbol(symbol)
				this.getMinbuyInfo()
				this.showLoading = false
			});
		},
		inject: ['reload'],
		beforeDestroy() {
			/*if (this.sendInterval) {
				clearInterval(this.sendInterval);
			}*/
		},
		methods: {
			getpriceInfo(index, num) {
				this.priceIndex = index;
				// this.price = Number(num);
				this.prices = Number(num);
			},
			loadSymbol(code) {
				if (typeof code != 'string' || code == '{}') {
					code = null
				}

				code = code || this.codeKey || 'GC'
				let currentSymbol
				this.symbolsArray.forEach((item) => {
					if (item.symbol === code) {
						currentSymbol = item
					}
				})

				if (!currentSymbol) {
					return
				}

				this.currentSymbol = currentSymbol
				this.clickTab(currentSymbol, 0)
			},
			formatTime,
			// 最小起买
			getMinbuyInfo() {
				let hold_time = this.timeList[this.timeIndex].m;

				let data = {
					bi_id: this.currentSymbol.bi_id,
					hold_time: hold_time
				};
				$postAxios(api.getMinbuy, data, res => {
					if (res.code == 0) {
						this.placeholder = this.$t('最少') + res.data + this.$t('起买');
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			// 委托方式
			getMoneyChangeInfo(val) {
				this.activeMoney = val;
			},
			revData(res) {
				this.futures = res
				this.future = res[this.codeKey]
				console.log(this.futures,'sj')
			},
			//  实时数据订阅
			send() {
				// this.$socket.on('sub.futures.list@global', this.revData)
				if(this.t){
					console.log('存在定时器')
					clearInterval(this.this.t)
					this.t = null;
				}
				this.t=setInterval(() => {
					$postAxios(api.getMarkets, {}, res => {
						if (res.code == 0) {
							// this.futures = res.data
							this.revData(res.data)
						
						} else {
							
						}
					});
				}, 2000);
			},
			// 极速买入下单
			addFastExtremelyFunc() {
				if(this.price == ''){
					this.price = this.prices;
				}
				if (Number(this.price) > Number(this.money)) {
					this.$toast(this.$t('已超出可用余额范围'));
					return false;
				}
				let data = {
					bi_id: this.bi_id,
					start_money: this.future.close,
					money: this.price,
					type: 1,
					hold_time: this.timeList[this.timeIndex].m
				};
				$postAxios(api.addSpeedOrder, data, res => {
					if (res.code == 0) {
						this.priceBuy = this.price;
						this.strikePrice = res.price;
						this.price = '';
						this.addShow01 = false;
						this.showResult = false;
						this.showFastOrder = true;
						this.$toast(this.$t('购买成功'));
						this.currentRate = Number(this.timeList[this.timeIndex].m);
						this.optionsBar.maxValue = Number(this.timeList[this.timeIndex].m);
						this.getTimeId(res.data);
						this.timeIndex = 0;
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			// 极速做空下单
			lessFastExtremelyFunc() {
				if(this.price == ''){
					this.price = this.prices;
				}
				if (Number(this.price) > Number(this.money)) {
					this.$toast(this.$t('已超出可用余额范围'));
					return false;
				}
				let data = {
					bi_id: this.bi_id,
					start_money: this.future.close,
					money: this.price,
					type: 2,
					hold_time: this.timeList[this.timeIndex].m
				};
				$postAxios(api.addSpeedOrder, data, res => {
					if (res.code == 0) {
						this.priceBuy = this.price;
						this.strikePrice = res.price;
						this.price = '';
						this.lessShow01 = false;
						this.showResult = false;
						this.showFastOrder = true;
						this.$toast(this.$t('购买成功'));
						this.currentRate = Number(this.timeList[this.timeIndex].m) - 1;
						this.optionsBar.maxValue = Number(this.timeList[this.timeIndex].m) - 1;
						this.getTimeId(res.data);
						this.timeIndex = 0;
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			// 倒计时
			getTimeId(id) {
				console.log(this.timeList[this.timeIndex].m, 'timeIndex');
				if (this.timesId) {
					clearInterval(this.timesId);
					this.timesId = null;
				} else {
					this.timesId = setInterval(() => {
						if (this.currentRate > 0) {
							this.currentRate = Number(this.currentRate - 1).toFixed(0);
							console.log(this.currentRate);
						} else {
							clearInterval(this.timesId);
							this.getTimeResultInfo(id);
						}
					}, 1000);
				}
			},
			// 获取倒计时后的结果
			getTimeResultInfo(id) {
				let data = {
					id: id
				};
				$postAxios(api.getUserSpeedOrderInfo, data, res => {
					if (res.code == 0) {
						this.usdtInfo = res.data.win_money ? res.data.win_money : 0;
						this.showResult = true;
						this.kaijiangres = res.data.end_money;
						this.showResult2 = 1;
					}
				});
			},
			//
			cancelBtn() {
				this.showResult = true;
				this.showFastOrder = false;
				this.getTimeId();
			},
			// 合约做多下单
			addContractFunc() {
				if (this.activeMoney == 0) {
					if (Number(this.contractAmount) > Number(this.money)) {
						this.$toast(this.$t('已超出可用余额范围'));
						return false;
					}
					let data = {
						bi_id: this.bi_id,
						start_money: this.future.close,
						money: this.contractAmount,
						type: 1,
						multiple: this.tabArray[this.tabArrIndex],
						max_lose_money: this.stopPrice,
						max_win_money: this.takeProfitPrice
					};
					$postAxios(api.addContractOrder, data, res => {
						if (res.code == 0) {
							this.contractAmount = 1;
							this.stopPrice = 1;
							this.takeProfitPrice = 1;
							this.tabArrIndex = 0;
							this.tabIndex = 0;
							this.popupShow02 = false;
							this.$toast(this.$t('购买成功'));
							this.storeIndex = 0;
							this.page = 0;
							this.getOrderInfo();
						} else {
							this.$toast(this.$t(res.msg));
						}
					});
				} else if (this.activeMoney == 1) {
					// 委托下单
					let data = {
						bi_id: this.bi_id,
						auto_start_money: this.orderPrice,
						money: this.contractAmount,
						type: 1,
						multiple: this.tabArray[this.tabArrIndex],
						max_lose_money: this.stopPrice,
						max_win_money: this.takeProfitPrice
					};

					$postAxios(api.addAutoContractOrder, data, res => {
						if (res.code == 0) {
							this.contractAmount = 1;
							this.stopPrice = 1;
							this.takeProfitPrice = 1;
							this.tabArrIndex = 0;
							this.tabIndex = 0;
							this.orderPrice = '';
							this.popupShow02 = false;
							this.$toast(this.$t('购买成功'));
							this.storeIndex = 0;
							this.page = 0;
							this.getOrderInfo();
						} else {
							this.$toast(this.$t(res.msg));
						}
					});
				}
			},
			// 合约做空下单
			lessContractFunc() {
				if (this.activeMoney == 0) {
					if (Number(this.contractAmount) > Number(this.moneyBibi)) {
						this.$toast(this.$t('已超出可用余额范围'));
						return false;
					}

					let data = {
						bi_id: this.bi_id,
						start_money: this.future.close,
						money: this.contractAmount,
						type: 2,
						multiple: this.tabArray[this.tabArrIndex],
						max_lose_money: this.takeProfitPrice,
						max_win_money: this.stopPrice
					};
					$postAxios(api.addContractOrder, data, res => {
						if (res.code == 0) {
							this.contractAmount = 1;
							this.stopPrice = 1;
							this.takeProfitPrice = 1;
							this.tabArrIndex = 0;
							this.tabIndex = 0;
							this.popupShow02 = false;
							this.$toast(this.$t('购买成功'));
							this.storeIndex = 0;
							this.page = 0;
							this.getOrderInfo();
						} else {
							this.$toast(this.$t(res.msg));
						}
					});
				} else if (this.activeMoney == 1) {
					let data = {
						bi_id: this.bi_id,
						auto_start_money: this.orderPrice,
						money: this.contractAmount,
						type: 2,
						multiple: this.tabArray[this.tabArrIndex],
						max_lose_money: this.takeProfitPrice,
						max_win_money: this.stopPrice
					};
					// 委托下单
					//alert(this.contractAmount);return;
					$postAxios(api.addAutoContractOrder, data, res => {
						if (res.code == 0) {
							this.contractAmount = 1;
							this.stopPrice = 1;
							this.takeProfitPrice = 1;
							this.tabArrIndex = 0;
							this.tabIndex = 0;
							this.orderPrice = '';
							this.popupShow02 = false;
							this.$toast(this.$t('购买成功'));
							this.storeIndex = 0;
							this.page = 0;
							this.getOrderInfo();
						} else {
							this.$toast(this.$t(res.msg));
						}
					});
				}
			},
			// 新增买入币币订单
			addCurrencyFunc() {
				if (this.buyValue == 0) {
					if (Number(this.amountBibi) > Number(this.money)) {
						this.$toast(this.$t('已超出可用余额范围'));
						return false;
					}
					let data = {
						bi_id: this.bi_id,
						start_money: this.future.close,
						money: this.amountBibi
					};
					$postAxios(api.addBibiOrder, data, res => {
						if (res.code == 0) {
							this.amountBibi = '';
							this.buyValue = 0;
							this.addShow03 = false;
							this.getBibiOrderInfo();
							this.$toast(this.$t('购买成功'));
						} else {
							this.$toast(this.$t(res.msg));
						}
					});
				} else if (this.buyValue == 1) {
					let data = {
						bi_id: this.bi_id,
						auto_start_money: this.popupShowFormNumber,
						money: this.amountBibi
					};
					$postAxios(api.addAutoBibiOrder, data, res => {
						if (res.code == 0) {
							this.amountBibi = '';
							this.buyValue = 0;
							this.addShow03 = false;
							this.getBibiOrderInfo();
							this.$toast(this.$t('购买成功'));
						} else {
							this.$toast(this.$t(res.msg));
						}
					});
				}
			},
			// 新增卖出币币订单
			lessCurrencyFunc() {
				if (this.buyValue == 0) {
					if (this.bibiInfo && this.bibiInfo.bibi_money) {
						if (Number(this.amount) > Number(this.bibiInfo.bibi_money)) {
							this.$toast(this.$t('已超出可用余额范围'));
							return false;
						}
					} else {
						this.$toast(this.$t('没有可用余额'));
						return false;
					}
					let data = {
						id: this.bibiInfo.id,
						num: this.amount,
						type: 1
					};
					$postAxios(api.endBibiOrder, data, res => {
						if (res.code == 0) {
							this.amount = '';
							this.buyValue = 0;
							this.lessShow03 = false;
							this.getBibiOrderInfo();
							this.$toast(this.$t('购买成功'));
						} else {
							this.$toast(this.$t(res.msg));
						}
					});
				} else if (this.buyValue == 1) {
					let data = {
						id: this.bibiInfo.id,
						num: this.amount,
						money: this.popupShowLessNumber,
						type: 2
					};
					$postAxios(api.endBibiOrder, data, res => {
						if (res.code == 0) {
							this.amount = '';
							this.buyValue = 0;
							this.lessShow03 = false;
							this.getBibiOrderInfo();
							this.$toast(this.$t('购买成功'));
						} else {
							this.$toast(this.$t(res.msg));
						}
					});
				}
			},
			// 止盈减少
			getLess05() {
				if (this.takeProfitPrice > 1) {
					this.takeProfitPrice--;
				} else {
					this.takeProfitPrice = 1;
				}
			},
			// 止盈增加
			getAdd05() {
				this.takeProfitPrice++;
			},
			// 止损减少
			getLess04() {
				if (this.stopPrice > 1) {
					this.stopPrice--;
				} else {
					this.stopPrice = 1;
				}
			},
			// 止损增加
			getAdd04() {
				this.stopPrice++;
			},
			// 减少
			getLess02() {
				if (this.popupShowLessNumber > 1) {
					this.popupShowLessNumber--;
				} else {
					this.popupShowLessNumber = 1;
				}
			},
			// 增加
			getAdd02() {
				this.popupShowLessNumber++;
			},
			// 减少
			getLess03() {
				if (this.contractAmount > 1) {
					this.contractAmount--;
				} else {
					this.contractAmount = 1;
				}
				this.contractAmountOld = this.contractAmount;
			},
			// 增加
			getAdd03() {
				this.contractAmount++;
				this.contractAmountOld = this.contractAmount;
			},
			// 减少
			getLess() {
				if (this.popupShowFormNumber > 1) {
					this.popupShowFormNumber--;
				} else {
					this.popupShowFormNumber = 1;
				}
			},
			// 增加
			getAdd() {
				this.popupShowFormNumber++;
			},
			// 获取我的账户余额
			getBankWithdrawalInfo() {
				$postAxios(api.getWalletList, {}, res => {
					if (res.code == 0) {
						res.data.forEach(item => {
							if (item.bi_id == 1) {
								this.money = item.money;
								this.amountBibi = (Number(this.money) * Number(this.numArr[this
									.numIndex])) / 100000;
							}
							if (item.bi_id == this.bi_id) {
								this.moneyBibi = item.bibi_money;
								this.amount = (Number(this.moneyBibi) * Number(this.numArr[this
									.numIndex])) / 100000;
							}
							let flag = res.data.some(item => {
								return item.bi_id == this.bi_id;
							});
							if (!flag) {
								this.moneyBibi = 0;
								this.amountBibi = 0;
								this.amount = 0;
							}
						});
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			// 获取币币资产
			getBibiListInfo() {
				$postAxios(api.bibilist, {}, result => {
					if (result.code == 0) {
						result.data.forEach(item => {
							if (item.bi_id == this.bi_id) {
								this.bibiInfo = item;
								if (this.bibiInfo && this.bibiInfo.bibi_money) {
									this.amount = (Number(this.bibiInfo.bibi_money) * Number(this.numArr[
										this.numIndex])) / 100;
								} else {
									this.amount = 0;
								}
							}
						});
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			// 币种切换选择触发
			getCoinClickFunc(val) {
				// console.log(val, "val");
				this.tabActiveIndex = val;
				if (val == 0) {
					this.$nextTick(async () => {
						this.symbolsArray = await this.initMyCoinInfo();
					});
				} else {
					this.$nextTick(async () => {
						this.symbolsArray = await this.initMarketInfo();
					});
				}
				// console.log(this.symbolsArray, "this.symbolsArray");
			},
			//  获取我的自选列表
			async initMyCoinInfo() {
				const result = await new Promise(resolve => {
					$postAxios(api.getLikeCoin, {}, res => {
						if (res.code == 0) {
							let arr = res.data.map(item => {
								if (item.is_zixuan == 1) {
									this.isCollect = true;
								} else {
									this.isCollect = false;
								}
								let obj = {
									symbol: item.code,
									title: item.EN_name,
									cn_title: item.CN_name,
									bi_id: item.bi_id,
									is_zixuan: item.is_zixuan,
									is_ft: item.is_ft,
								};
								return obj;
							});
							resolve(arr);
						} else {
							this.$toast(this.$t(res.msg));
						}
					});
				});
				return result;
			},
			//  切换b种
			clickTab(symbol, index) {
				localStorage.setItem('symbol', symbol.symbol)
				this.codeKey = symbol.symbol
				this.symbol = symbol.symbol
				this.title = this.$i18n.locale == 'zh' ? symbol.cn_title : symbol.title,
					this.bi_id = symbol.bi_id
				this.symbolObj = symbol

				if (symbol.is_zixuan == 1) {
					this.isCollect = true;
				} else {
					this.isCollect = false;
				}
				this.isShowSysbol = index;
				this.sideBarShow = false;

				if (this.bi_id) {
					this.getBibiOrderInfo();
				}

				if (this.tabActive == 2) {
					this.send();
				}

				this.getBankWithdrawalInfo()
			},
			// 获取交易对数据
			async initMarketInfo() {
				const result = await new Promise(resolve => {
					$postAxios(api.getMarket, {}, res => {
						if (res.code == 0) {
							let arr = res.data.map(item => {
								let obj = {
									symbol: item.code,
									title: item.EN_name,
									cn_title: item.CN_name,
									note: this.$i18n.locale == 'zh' ? item.CN_name : item
										.EN_name,
									bi_id: item.bi_id,
									is_zixuan: item.is_zixuan,
									is_ft: item.is_ft,
								};
								if (item.EN_name == 'GC') {
									this.bi_id = item.bi_id;
									if (item.is_zixuan == 1) {
										this.isCollect = true;
									} else {
										this.isCollect = false;
									}
									let obj = {
										symbol: item.code,
										title: item.EN_name,
										cn_title: item.CN_name,
										note: this.$i18n.locale == 'zh' ? item.CN_name :
											item.EN_name,
										bi_id: item.bi_id,
										is_zixuan: item.is_zixuan,
										is_ft: item.is_ft,
									};
									this.symbolObj = obj;
								}
								return obj;
							});
							resolve(arr);
						} else {
							this.$toast(this.$t(res.msg));
						}
					});
				});
				return result;
			},
			//  最新市场概要快照
			loadTopMarket() {
				this.symbolsArray.forEach(item => {
					if (!this.futures) return;
					if (this.futures[item.code]) {
						let d = this.futures[item.code]
						d.change = d.ratio
						this.close = d.close
						this.cny = ''
					}
				});
			},
			// 获取tab下标
			getIndexValue01(val) {
				this.numIndex = val;
				this.amountBibi = (Number(this.money) * Number(this.numArr[this.numIndex])) / 100;
			},
			// 获取tab下标
			getIndexValue02(val) {
				this.numIndex = val;
				if (this.bibiInfo && this.bibiInfo.bibi_money) {
					this.amount = (Number(this.bibiInfo.bibi_money) * Number(this.numArr[this.numIndex])) / 100;
				} else {
					this.amount = 0;
				}
			},
			// 获取tab下标
			getValueIndex(val) {
				this.tabArrIndex = val;
			},
			// 获取tab下标
			getValue(val) {
				this.tabIndex = val;
				this.contractAmount = this.contractAmountOld;
				this.contractAmount = (Number(this.contractAmount) * Number(this.tabArr[val])).toFixed(0);
			},
			// 获取合约金额
			getAmount(e) {
				this.contractAmountOld = Number(e.target.value).toFixed(0);
				this.contractAmount = this.contractAmountOld;
			},
			// 获取止损价
			getStopPirce(e) {
				this.stopPrice = Number(e.target.value).toFixed(0);
			},
			// 获取止盈价
			getTakeProfitPrice(e) {
				this.takeProfitPrice = Number(e.target.value).toFixed(0);
			},
			// 获取tab下标
			getIndex(index) {
				this.buyIndex = index;
			},
			// 搜索产品
			onSearch() {
				let data = {
					biname: this.searchText
				};
				$postAxios(api.searchCoin, data, res => {
					if (res.code == 0) {
						this.symbolsArray = res.data.map(item => {
							if (item.EN_name == 'BTC') {
								this.bi_id = item.bi_id;
								if (item.is_zixuan == 1) {
									this.isCollect = true;
								} else {
									this.isCollect = false;
								}
								this.symbolObj = item;
							}
							let obj = {
								symbol: item.code,
								title: item.EN_name,
								cn_title: item.CN_name,
								note: this.$i18n.locale == 'zh' ? item.CN_name : item.EN_name,
								bi_id: item.bi_id,
								is_zixuan: item.is_zixuan,
								is_ft: item.is_ft,
							};
							return obj;
						});
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			// 做多
			buyMore() {
				this.getMinbuyInfo();
				if (this.tabActive == 0) {
					this.getOrderStoreTimeInfo();
					this.getBankWithdrawalInfo();
					this.getCoinTransactionFeeInfo();
					this.buyType = 0;
					this.addShow01 = true;
				} else if (this.tabActive == 1) {
					this.buyIndex = 0;
					this.getBankWithdrawalInfo();
					this.getCoinTransactionFeeInfo();
					let price = this.future.close;
					this.stopPrice = (Number(price) - Number(price) * 0.2).toFixed(0);
					this.takeProfitPrice = (Number(price) + Number(price) * 0.2).toFixed(0);
					this.popupShow02 = true;
				} else if (this.tabActive == 2) {
					this.getBankWithdrawalInfo();
					this.numIndex = 0;
					this.addShow03 = true;
				}
			},
			// 做空
			buyShort() {
				this.getMinbuyInfo();
				if (this.tabActive == 0) {
					this.getOrderStoreTimeInfo();
					this.getBankWithdrawalInfo();
					this.getCoinTransactionFeeInfo();
					this.buyType = 1;
					this.lessShow01 = true;
				} else if (this.tabActive == 1) {
					this.buyIndex = 1;
					this.getBankWithdrawalInfo();
					this.getCoinTransactionFeeInfo();
					let price = this.future.close;
					this.stopPrice = (Number(price) - Number(price) * 0.2).toFixed(0);
					this.takeProfitPrice = (Number(price) + Number(price) * 0.2).toFixed(0);
					this.popupShow02 = true;
				} else if (this.tabActive == 2) {
					this.getBibiListInfo();
					this.numIndex = 0;
					this.lessShow03 = true;
				}
			},
			// 获取极速订单持仓时间
			getOrderStoreTimeInfo() {
				$postAxios(api.getSpeedOrderHoldTime, {}, res => {
					if (res.code == 0) {
						this.timeList = res.data;
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			// 获取币种交易手续费
			getCoinTransactionFeeInfo() {
				let data = {
					bi_id: this.bi_id
				};
				$postAxios(api.getCoinTransactionFee, data, res => {
					if (res.code == 0) {
						this.transactionFee = res.data;
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			// 获取时间信息
			getTimeInfo(index) {
				this.timeIndex = index;
				this.price=0;
				this.priceIndex=null;
				this.getMinbuyInfo();
			},
			// tab 切换
			goTab(val, index) {
				this.activeIndex = index;
				this.tabActive = val;
				if (val == 1) {
					this.storeIndex = 0;
					this.page = 0;
					this.getOrderInfo();
				} else if (val == 2) {
					this.getBibiOrderInfo();
					this.send();
				}
			},
			// 获取币币订单数据
			getBibiOrderInfo() {
				let data = {
					bi_id: this.bi_id,
					status: 2
				};
				$postAxios(api.getUserBibiOrderList, data, res => {
					if (res.code == 0) {
						this.bibiOrderList = res.data;
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			// 撤销订单
			cancelOrder(id) {
				let data = {
					id: id
				};
				$postAxios(api.cancelAutoBibiOrder, data, res => {
					if (res.code == 0) {
						this.getBibiOrderInfo();
						this.$toast(this.$t('撤销成功'));
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			onRefresh01() {
				// 清空列表数据
				this.finished = false;
				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.page = 0;
				this.orderList = [];
				this.getList();
			},
			// 获取合约订单列表
			getOrderInfo() {
				if (this.refreshing) {
					this.orderList = [];
					this.page = 0;
					this.refreshing = false;
				}
				let status = this.storeIndex + 1;
				let data = {
					status: status,
					page: this.page,
					rows: this.rows
				};

				$postAxios(api.getUserContractOrderList, data, res => {
					if (res.code == 0) {
						this.totalElements = res.count;
						if (res.data.length > 0) {
							if (this.page == 0) {
								this.orderList = res.data;
							} else {
								this.orderList = this.orderList.concat(res.data);
							}
							this.loading = false;
							this.page++;
						} else {
							this.orderList = [];
						}
						if (this.orderList.length == this.totalElements) {
							this.finished = true;
						}
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			// 时间tab切换
			getTimeFunc(val) {
				this.timeIndex = val;
			},
			// tab 切换
			getStoreFunc(val) {
				this.storeIndex = val;
				this.page = 0;
				this.getOrderInfo();
			},
			// 收藏
			getCollect() {
				this.bi_id = this.bi_id || this.getIdByCode(this.codeKey)

				let data = {
					bi_id: this.bi_id
				};
				if (this.isCollect) {
					$postAxios(api.removeLike, data, res => {
						if (res.code == 0) {
							this.isCollect = !this.isCollect;
							this.$toast(this.$t('添加自选成功'));
						} else {
							this.$toast(this.$t(res.msg));
						}
					});
				} else {
					$postAxios(api.likeCoin, data, res => {
						if (res.code == 0) {
							this.isCollect = !this.isCollect;
							this.$toast(this.$t('添加自选成功'));
						} else {
							this.$toast(this.$t(res.msg));
						}
					});
				}
			},
			// 跳转页面
			goOther(val, num) {
				if (val == 1) {
					if (this.tabActive == 0) {
						this.$router.push('/rapidPosition');
					} else if (this.tabActive == 1) {
						this.$router.push('/contractPosition');
					}
				} else if (val == 2) {
					this.reload();
					this.$router.push({
						path: '/tradeRecord',
						query: {
							type: num
						}
					});
				} else if (val == 3) {
					this.$router.push('/financialTradeList2?title=' + this.title + '&bi_id=' + this.bi_id);
				}
			}
		}
	};
</script>
<style scoped>
	/deep/.van-popup {
		background-color: transparent;
		overflow-y: 0;
	}

	/deep/.btnddd .van-button--primary {
		background-color: #edd33a;
		border-color: #edd33a;
		height: 40px;
		line-height: 40px;
		color: #000;
		font-size: 13px;
	}
</style>
<style lang="scss" scoped>
	#canvas {
		width: 100%;
		height: 500px;
	}

	.red {
		color: #fb4a61 !important;
	}

	.container {
		padding-bottom: 116px;
		width: 100%;
		min-height: 100vh;
		height: 100%;
		box-sizing: border-box;
		background-color: #21212b;

		::v-deep.van-popup--center {
			border-radius: 8px;
		}

		.popupCenterBox {
			width: 70vw;
			height: 50vh;
			background-color: #fff;

			.contentSub {
				.vancircle {
					margin: 0 auto 20px;
					width: 100px;
					height: 100px;
					display: block;
				}

				.titleBox {
					margin-bottom: 20px;
					width: 100%;
					height: 100px;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					.title {
						color: #5388f6;
						font-size: 18px;
						font-weight: 700;
					}

					.text {
						color: #333;
						font-size: 14px;
					}
				}

				.btn {
					padding: 0 10px;

				}

				.innerArea {
					margin-bottom: 20px;
					padding: 0 20px;

					.item {
						margin-bottom: 10px;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.ttl {
							color: #666;
							font-size: 12px;
						}

						.text {
							color: #000;
							font-size: 14px;
						}

						&:last-child {
							margin-bottom: 0;
						}
					}
				}
			}

			.ttlBox {
				margin-bottom: 20px;
				padding: 10px 0;
				position: relative;
				font-size: 18px;
				text-align: center;
				border-bottom: 1px solid rgb(218, 218, 218);

				img {
					width: 12px;
					height: auto;
					display: block;
					position: absolute;
					right: 15px;
					top: 12px;
				}
			}
		}

		.popupBottomBox {
			padding-bottom: 30px;

			.ttlBox {
				position: relative;
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #000;
				font-size: 12px;

				img {
					display: block;
					width: 10px;
					height: auto;
					position: absolute;
					right: 20px;
				}
			}

			.subInner {
				padding: 0 10px 30px;

				.van-dropdown-menu {
					margin-bottom: 10px;
				}

				.itemInner {
					margin-bottom: 10px;
					padding: 0 20px;
					position: relative;
					height: 37px;
					font-size: 14px;
					line-height: 37px;
					border: 1px solid #edf0f7;

					input {
						width: 100%;
						height: 100%;
						display: block;
						border: none;
						box-sizing: border-box;
					}

					span {
						position: absolute;
						top: 0;
						right: 20px;
						color: #000;
						font-size: 14px;
						line-height: 37px;
					}
				}

				.itemText {
					margin-bottom: 10px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #000;
					font-size: 12px;

					span {
						margin-left: 10px;
					}
				}

				.tabUl {
					margin-bottom: 20px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					li {
						width: 24%;
						height: 37px;
						line-height: 37px;
						text-align: center;
						color: #000;
						font-size: 15px;
						opacity: 0.5;
						flex-shrink: 0;
						border-radius: 2px;
						background-color: #edf0f7;

						&.active {
							color: #fff;
							opacity: 1;
							background-color: #f3a630;
						}
					}
				}

				.inputBox {
					margin-bottom: 10px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.inputStyle {
						width: 70%;
						height: 44px;
						display: block;
						font-size: 16px;
						line-height: 44px;
						text-align: center;
						box-sizing: border-box;
						border: 1px solid #edf0f7;
					}
				}
			}

			.subBox {
				padding: 0 10px;

				::v-deep.van-tabs {
					margin-bottom: 15px;

					.tabStyle {
						font-size: 12px;
						line-height: 27px;
					}
				}

				.subArea {
					margin-bottom: 10px;

					input {
						padding: 10px;
						display: block;
						width: 100%;
						color: #000;
						font-size: 14px;
						box-sizing: border-box;
						border: 1px solid #edf0f7;
					}
				}

				// .tabList {
				//   margin-bottom: 5px;
				//   display: flex;
				//   align-items: center;
				//   justify-content: space-between;
				li {
					width: 48.5%;
					height: 28px;
					color: #000;
					line-height: 28px;
					flex-shrink: 0;
					font-size: 12px;
					text-align: center;
					background-color: #edf0f7;

					&:first-child.active {
						color: #fff;
						background-color: #5eb988;
					}

					&:last-child.active {
						color: #fff;
						background-color: #db6964;
					}
				}

				// }
				.titleTxt {
					margin-bottom: 5px;
					color: #000;
					font-size: 12px;
				}

				.tabUl {
					margin-bottom: 10px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					li {
						width: 24%;
						height: 37px;
						line-height: 37px;
						text-align: center;
						color: #000;
						font-size: 15px;
						opacity: 0.5;
						flex-shrink: 0;
						border-radius: 2px;
						background-color: #edf0f7;

						&.active {
							color: #fff;
							opacity: 1;
							background-color: #f3a630;
						}
					}
				}

				.inputBox {
					margin-bottom: 10px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.inputStyle {
						width: 70%;
						height: 44px;
						display: block;
						font-size: 16px;
						line-height: 44px;
						text-align: center;
						box-sizing: border-box;
						border: 1px solid #edf0f7;
					}
				}

				.tabUlBox {
					margin-bottom: 10px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					li {
						width: 18.5%;
						height: 37px;
						line-height: 37px;
						text-align: center;
						color: #000;
						font-size: 15px;
						opacity: 0.5;
						flex-shrink: 0;
						border-radius: 2px;
						background-color: #edf0f7;

						&.active {
							color: #fff;
							opacity: 1;
							background-color: #f3a630;
						}
					}
				}

				.innerArea {
					.item {
						margin-bottom: 10px;
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: #000;
						font-size: 12px;
					}
				}
			}

			.btn {
				padding: 0 10px 10px;
			}
		}

		.bottomBarBox {
			// padding: 0 10px;
			width: 300px;
			height: 370px;
			margin: 0 auto;
			box-sizing: border-box;
			background-color: #030304;

			.ttlBox {
				width: 100%;
				height: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				border-bottom: 1px solid #fff;

				.ttl {
					color: #fff;
					font-size: 14px;
				}

				img {
					margin-right: 10px;
					width: 12px;
					position: absolute;
					right: 0px;
					top: 8px;
					height: auto;
					display: block;
				}
			}

			.subBoxTow {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 10px;
				.innerItemTow {
					width: 20%;
					color: #fff;
					font-size: 13px;
					text-align: center;
				.title{
					margin-bottom: 10px;
				}
					.green {
						color: #26a848;
					}
				
					.red {
						color: #ff0105 !important;
					}
				}
			}

			.subBox {
				.innerItem {
					margin: 5px 0px;
					color: #b2b0c7;
					font-size: 14px;

					.green {
						color: #1cad90;
					}

					.red {
						color: #db6964;
					}
				}

				.innerArea {
					margin-bottom: 10px;
					display: flex;
					align-items: center;
					justify-content: start;
					flex-wrap: wrap;

					.itemArea {
						margin-right: 15px;
						padding: 5px 5px;
						color: #fff;
						font-size: 12px;
						display: flex;
						margin-top: 5px;
						align-items: center;
						flex-shrink: 0;
						box-sizing: border-box;
						border-radius: 5px;
						background-color: #030304;
						border: 1px solid #fff;

						&.active {
							color: #000;
							opacity: 1;
							border: 1px solid #edd33a;
							background-color: #edd33a;
						}
					}
				}

				.titleTxt {
					margin-top: 5px;
					color: #b2b0c7;
					font-size: 14px;
				}

				.priceInput {
					margin-bottom: 5px;
					width: 100%;
					height: 35px;
					display: block;
					line-height: 38px;
					color: #fff;
					font-size: 13px;
					box-sizing: border-box;
					background-color: #030304;
					border: none;
					border-bottom: 1px solid #fff;
				}

				.priceInput::placeholder {
					color: #b2b0c7;
				}

				.btmTxt {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 30%;
					box-sizing: border-box;
					color: #b2b0c7;
					font-size: 12px;
					margin-bottom: 5px;
				}
			}
		}

		.sideBarBox {
			padding: 0 10px 10px;
			width: 60vw;
			height: 100vh;
			box-sizing: border-box;
			background-color: #fff;

			.innerBox {
				padding: 10px;

				.item {
					margin-bottom: 10px;
					padding: 15px 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.ttl {
						color: #999;
						font-size: 11px;

						span {
							color: #333;
							font-size: 14px;
						}
					}

					.text {
						color: #1cad90;
						font-size: 12px;

						&.red {
							color: #db6964;
						}
					}
				}
			}

			.title {
				color: #000;
				font-size: 13px;
				font-weight: 700;
				line-height: 50px;
			}

			.van-search {
				padding: 10px 0;

				::v-deep .van-search__content {
					.van-cell {
						display: flex;
						align-items: center;
						flex-direction: row;

						.van-cell__value.van-field__value {
							height: auto;
							border: none;

							.van-field__body {
								height: 100%;
								width: 100%;
							}
						}
					}
				}
			}
		}

		.btmInnerBox {
			width: 100%;
			padding: 10px;
			position: absolute;
			left: 0;
			bottom: 0;
			box-sizing: border-box;

			ul {
				display: flex;
				align-items: center;
				justify-content: center;

				li {
					width: 50%;
					flex-shrink: 0;

					.van-button {
						margin: 0 auto;
						width: 172px;
						background-color: #5eb988;
						border-radius: 5px;
						border: 1px solid rgba(0, 0, 0, 0.2);
					}

					&:last-child {
						.van-button {
							background-color: #db6964;
						}
					}
				}
			}
		}

		.content {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 54px;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;

			.tabInner {
				padding-top: 10px;

				.contentInnerArea {
					width: 100%;
					position: absolute;
					left: 0;
					top: 0px;
					bottom: 64px;
					overflow-y: auto;
					-webkit-overflow-scrolling: touch;
				}

				.btmInner {
					iframe {
						margin-bottom: 10px;
						width: 100vw;
						height: calc(100vh - 30vh);
					}

					.realTimeBox {
						padding: 10px 10px 20px;

						ul {
							display: flex;
							align-items: center;
							justify-content: center;

							li {
								width: 50%;
								flex-shrink: 0;

								.van-button {
									margin: 0 auto;
									width: 172px;
									color: #fff;
									background-color: #f3a630;
									border-radius: 2px;
								}
							}
						}
					}

					.tabArea {
						ul {
							padding: 10px 0 15px;
							display: flex;
							align-items: center;
							justify-content: center;

							li {
								margin-right: 1px;
								width: 42px;
								height: 25px;
								line-height: 25px;
								color: #f3a630;
								font-size: 14px;
								text-align: center;
								border-radius: 2px;

								&.active {
									color: #fff;
									background-color: #f3a630;
								}
							}
						}
					}
				}

				.contentArea {
					.tabArea {
						ul {
							display: flex;
							align-items: center;
							justify-content: center;

							li {
								margin: 0 5px;
								padding: 0 10px;
								height: 25px;
								color: #000;
								font-size: 12px;
								text-align: center;
								line-height: 25px;
								border-radius: 12px;

								&.active {
									color: #fff;
									background-color: #f3a630;
								}
							}
						}
					}

					.tabInnerContent {
						.ttlBox01 {
							padding: 10px;
							display: flex;
							align-items: center;
							justify-content: space-between;

							p {
								width: 20%;
								flex-shrink: 0;
								color: #777;
								font-size: 12px;
								text-align: center;
							}
						}

						.itemBox01 {
							padding: 10px;

							.van-cell__value {
								display: flex;
								align-items: center;
								justify-content: space-between;
							}

							p {
								width: 20%;
								flex-shrink: 0;
								color: #777;
								font-size: 12px;
								text-align: center;
							}
						}

						.ttlBox02 {
							padding: 10px 30px;
							display: flex;
							align-items: center;
							justify-content: space-between;

							p {
								width: 20%;
								color: #777;
								font-size: 12px;
								text-align: center;

								&:nth-child(2) {
									min-width: 83px;
								}
							}
						}

						.itemBox02 {
							padding: 10px 30px;

							.van-cell__value {
								display: flex;
								align-items: center;
								justify-content: space-between;
							}

							p {
								width: 20%;
								color: #777;
								font-size: 12px;
								text-align: center;

								&:nth-child(2) {
									min-width: 83px;
								}
							}
						}
					}

					.tabAreaInner {
						padding: 15px;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.leftAreaInner {
							padding-bottom: 10px;
							color: #000;
							font-size: 12px;
							border-bottom: 2px solid #f3a630;
						}

						.rightAreaInner {
							img {
								display: block;
								width: 18px;
								height: auto;
							}
						}
					}

					.tabContent {
						.noneBox {
							padding-top: 30px;

							img {
								margin: 0 auto;
								width: 65px;
								height: auto;
								display: block;
							}
						}

						.hasBox {
							padding: 0 10px;

							.itemBox {
								margin-bottom: 10px;
								padding-bottom: 10px;
								padding: 15px;
								border-bottom: 1px solid rgb(224, 224, 224);

								&:last-child {
									border-bottom: none;
								}

								.topInner {
									margin-bottom: 10px;
									padding: 0 10px;
									color: #000;
									font-size: 14px;
									display: flex;
									align-items: center;
									justify-content: space-between;
								}

								.btmInner {
									display: flex;
									align-items: center;
									justify-content: space-between;

									.item {
										width: 30%;
										color: #000;
										font-size: 14px;
										flex-shrink: 0;
										text-align: center;
										flex-direction: column;

										&:first-child {
											min-width: 44%;
										}
									}
								}
							}
						}
					}
				}

				.contentInner {
					padding: 10px 15px;
					display: flex;
					justify-content: space-between;

					ul {
						li {
							padding: 5px 0;
							height: 30px;
							display: flex;
							align-items: center;
							justify-content: space-between;
							box-sizing: border-box;

							.num {
								color: #000;
								font-size: 12px;
							}

							.price {
								color: #1cad90;
								font-size: 12px;
							}
						}
					}

					.leftSub {
						padding: 0 5px;
						width: 50%;
						min-height: 204px;
					}

					.rightSub {
						padding: 0 5px;
						width: 50%;
						min-height: 204px;

						ul {
							li {
								.num {
									color: #db6964;
									font-size: 12px;
								}

								.price {
									color: #000;
									font-size: 12px;
								}
							}
						}
					}

					.ttl {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.num {
							color: #777;
							font-size: 12px;
						}

						.price {
							color: #777;
							font-size: 12px;
							text-align: right;
						}
					}
				}

				.topArea {
					padding-bottom: 10px;
					display: flex;
					align-items: center;

					.rightBox {
						p {
							color: #1cad90;
							font-size: 24px;

							&.red {
								color: #db6964;
							}

							&.green {
								color: #1cad90;
							}
						}
					}

					.leftBox {
						padding: 0 15px;

						.ttlBox {
							display: flex;
							align-items: center;

							p {
								color: #000;
								font-size: 17px;
							}

							img {
								margin-left: 5px;
								display: block;
								width: 10px;
								height: auto;
							}
						}

						.noteTxt {
							color: #1cad90;
							font-size: 14px;

							span {
								&.red {
									color: #db6964;
								}

								&.green {
									color: #1cad90;
								}
							}

							.txt {
								padding-right: 10px;

								&.red {
									color: #db6964;
								}
							}
						}
					}
				}

				.topInner {
					padding: 0 15px;
					display: flex;
					justify-content: space-between;

					.rightBox {
						width: 55%;
						flex-shrink: 0;

						.innerArea {
							display: flex;
							align-items: flex-end;
							justify-content: space-between;

							// .leftInner {
							//   margin: 10px 0 0 10px;
							//   width: 40%;
							//   flex-shrink: 0;
							// }
							.rightInner {
								margin: 10px 0 0 10px;
								width: 40%;
								flex-shrink: 0;
							}

							.ttl {
								color: #000;
								font-size: 12px;
							}

							.text {
								color: #000;
								font-size: 16px;
								font-weight: 700;
							}
						}
					}

					.leftBox {
						padding: 8px 0 7px 10px;

						.ttlBox {
							display: flex;
							align-items: center;

							p {
								color: #000;
								font-size: 15px;
								font-weight: 700;
							}

							img {
								display: block;
								width: 10px;
								height: auto;
							}
						}

						.numText {
							color: #1cad90;
							font-size: 28px;
							font-weight: bold;
						}

						.noteTxt {
							color: #1cad90;
							font-size: 14px;
							font-weight: 600;

							span {
								&.red {
									color: #db6964;
								}

								&.green {
									color: #1cad90;
								}
							}

							.txt {
								padding-right: 10px;

								&.red {
									color: #db6964;
								}
							}
						}
					}
				}
			}

			.tabBox {
				padding: 10px 15px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.leftInner {
					.tabList {
						width: 155px;
						width: 205px;
						//   display: flex;
						// align-items: center;
						// color: #f3a630;
						font-size: 12px;

						// border-radius: 2px;
						//   border: 1px solid #f3a630;
						//     background-color: #fff;
						li {
							padding: 5px 0;
							width: 50%;
							// width: 33.33%;
							flex-shrink: 0;
							border-radius: 2px;
							text-align: center;
							box-sizing: border-box;
							border-right: 1px solid #f3a630;

							&.active {
								color: #fff;
								background-color: #f3a630;
							}

							&:last-child {
								border-right: none;
							}
						}
					}
				}

				.rightInner {
					display: flex;
					align-items: center;
					justify-content: end;

					.starBox {
						margin-left: 15px;
						width: 16px;

						img {
							display: block;
							width: 100%;
							height: auto;
						}
					}

					.innerArea {
						display: flex;
						align-items: center;

						img {
							margin-right: 4px;
							display: block;
							width: 12px;
							height: auto;
						}

						p {
							color: #000;
							font-size: 12px;
						}
					}
				}
			}
		}
	}

	.navList {
		width: 100%;
		display: flex;
		align-items: center;
		overflow-x: scroll;
		padding: 10px 0;
		box-sizing: border-box;

		.navListIt {
			margin: 10px 10px;
			color: #828095;
			font-size: 15px;
			font-weight: 700;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;
  		  width: 100px;

		}

		.navListItTow {
			color: #fede33;
		}
	}
</style>